import React,{useEffect,useRef} from "react";
import styled from "styled-components";
const Container=styled.div`
width:100%;
height:300px
`
export default function UserListConterntMap() {
  const container=useRef()
  const mapInstance=useRef()
  // 组件加载完之后使用 相当于motuned使用
  useEffect(() => {
    // 放在public里BMapGL是挂载在window里
    mapInstance.current= new window.BMapGL.Map(container.current);          // 创建地图实例 
mapInstance.current.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 15);                 // 初始化地图，设置中心点坐标和地图级别
mapInstance.current.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  const geolocation=new window.BMapGL.Geolocation()
  geolocation.getCurrentPosition((r)=>{
    if(geolocation.getStatus === 'BMAP_STATUS_SUCCESS'){
      const mk=new window.BMapGL.Marker(r.point);
      mapInstance.current.addOverlay(mk)
      mapInstance.current.panTo(r.point);
      mapInstance.current.centerAndZoom(r.point,15);
      alert('您的位置：'+r.point.lng+','+r.point.lat)
    } else {
      alert('failed'+geolocation.getStatus())
    }
  },{enableHighAccuracy:true})
  }, [])
  
  return (<div><Container ref={container}></Container></div>)
  
}
